<div class="sidebar">
  <div class="logo">
    <div class="logo-normal">
      <a class="simple-text" routerLink="/">Creative Tim</a>
    </div>
    <div class="logo-img">
      <img src="../../../../assets/images/angular2-logo-white.png">
    </div>
  </div>
  <div class="sidebar-wrapper ps-container ps-theme-default ps-active-y">
    <div class="user">
      <div class="photo">
        <img src="../../../../assets/images/default-avatar.png">
      </div>
      <div class="info">
        <a class="collapsed" [ngClass]="{'open': userCollapse}" (click)="toggleUser()">
          <p>
            <span>Tania Andrew</span>
            <b class="caret"></b>
          </p>
        </a>
        <div class="collapse" [ngClass]="{'in': userCollapse}">
          <ul class="nav">
            <li routerLinkActive="active" *ngFor="let user of userData">
              <a [routerLink]=user.path>
                <span class="sidebar-mini">{{user.sortName}}</span>
                <span class="sidebar-normal">{{user.name}}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="nav-container">
      <ul class="nav">
        <li routerLinkActive="active" *ngFor="let item of navData">
          <div *ngIf="item.path; then thenBlock else elseBlock"></div>
          <ng-template #thenBlock>
            <a [routerLink]=item.path>
              <i [ngClass]=item.icon></i>
              <p>{{item.name}}</p>
            </a>
          </ng-template>
          <ng-template #elseBlock>
            <a class="collapse" [ngClass]="{'open': nav[item.name]}" (click)="toggleNav(item.name)">
              <i [ngClass]=item.icon></i>
              <p>
                <span>{{item.name}}</span>
                <b class="caret"></b>
              </p>
            </a>
            <div class="collapse" [ngClass]="{'in': nav[item.name]}">
              <ul class="nav">
                <li routerLinkActive="active" *ngFor="let collapse of item.collapse">
                  <a [routerLink]=collapse.path>
                    <span class="sidebar-mini">{{collapse.sortName}}</span>
                    <span class="sidebar-normal">{{collapse.name}}</span>
                  </a>
                </li>
              </ul>
            </div>
          </ng-template>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidebar-background" style="background-image: url(../../../../assets/images/sidebar-1.jpg)"></div>
</div>
